<!DOCTYPE html>
<!-- Copyright (C) 2020  Matthew "strager" Glazar -->
<!-- See end of file for extended copyright information. -->
<html lang="en">
  <head>
    <%- await include("../common-head.ejs.html") %>
    <title>quick-lint-js: installing</title>
    <meta
      name="description"
      content="Install quick-lint-js on Linux, macOS, Windows, VS Code and many more!"
    />
    <link href="../main.css" rel="stylesheet" />
    <style>
      .install-comparison table {
        border-collapse: collapse;
        width: 100%;
      }
      .install-comparison col,
      .install-comparison td,
      .install-comparison th {
        border-color: #888888;
        border-style: solid;
        border-width: 0;
      }
      .install-comparison td,
      .install-comparison th {
        padding: 0.5em 1em;
        text-align: center;
      }
      .install-comparison th:first-child {
        text-align: right;
      }
      .install-comparison tbody td,
      .install-comparison tbody th {
        border-top-width: 1px;
      }

      .install-comparison td.os {
        padding: 0;
        width: 1.5em;
      }

      .install-comparison colgroup:not(:first-child) col:first-child {
        border-left-width: 1px;
      }

      .install-comparison .footnote-marker {
        position: absolute;
      }

      .install-logo,
      .os-logo {
        height: 1.2em;
        vertical-align: text-bottom;
      }

      .os-column-table {
        display: grid;
        grid-template-areas: "linux macos windows";
      }
      .os-column-table h3 {
        margin-top: 0;
      }

      .os-column-table > * {
        border-left: 1px solid #ccc;
        padding-left: 1rem;
        padding-right: 1rem;
      }
      .os-column-table > .linux {
        border-left-color: transparent;
        grid-area: linux;
      }
      .os-column-table > .macos {
        grid-area: macos;
      }
      .os-column-table > .windows {
        grid-area: windows;
      }

      @media only screen and (min-width: 34em) and (max-width: 40em) {
        .os-column-table ul {
          margin-left: 0;
          padding-left: 1em;
        }
      }

      /* Stack items on top of each other if the screen isn't wide enough to
               arrange them horizontally. */
      @media only screen and (max-width: 34em) {
        .os-column-table {
          grid-template-areas: "linux" "macos" "windows";
        }
        .os-column-table > * {
          border-left: 0;
        }
      }

      /* HACK(strager): Work around bug in EdgeHTML 13.10586 causing the Windows
               column of the operating systems column group to be super wide. */
      img.os-logo[src$="/windows.svg"] {
        width: 1.2em;
      }

      /* Make the entire cell clickable. (How does this even work???) */
      .install-comparison table {
        height: 0;
      }
      .install-comparison td {
        height: 100%;
        padding: 0;
      }
      .install-comparison td > a {
        align-items: center;
        display: flex;
        height: 100%;
        justify-content: center;
        text-decoration: none;
      }
      .install-comparison td > a:hover {
        background-color: rgba(0, 0, 0, 0.05);
      }
      @media (prefers-color-scheme: dark) {
        .install-comparison td > a:hover {
          background-color: rgba(255, 255, 255, 0.3);
        }
      }

      /* Add lots of spacing between different install procedures so people
               don't start reading the wrong instructions. */
      article {
        margin-top: 2rem;
        margin-bottom: 4rem;
      }
      article > h2 {
        padding-top: 4rem;
      }

      .long-shell-command-line {
        /* 6 = "$ ".length + 4 spaces of indentation */
        display: inline-block;
        padding-left: 6ch;
        text-indent: -6ch;
        white-space: normal;
      }

      code kbd::before {
        content: "$ ";
      }
    </style>
  </head>
  <body class="side-bar-nav">
    <header>
      <h1><a href="..">quick-lint-js</a></h1>
      <p class="tag-line">quick-lint-js finds bugs in JavaScript programs.</p>
      <%- await include("../common-nav.ejs.html") %>
    </header>

    <main>
      <h2>Install quick-lint-js</h2>
      <p>
        Latest version: 0.3.0 (beta) (released
        <time datetime="2021-07-02">July 2, 2021</time>)<br /><a
          href="../releases/"
          >Previous versions</a
        >
      </p>

      <figure class="comparison install-comparison">
        <table>
          <colgroup>
            <col />
          </colgroup>
          <colgroup>
            <col />
            <col />
            <col />
          </colgroup>
          <colgroup>
            <col />
            <col />
            <col />
            <col />
          </colgroup>

          <thead>
            <tr>
              <th>Install method</th>

              <th colspan="3">Operating systems</th>

              <th>
                <img
                  class="install-logo"
                  src="../gnome-terminal.svg"
                  alt=""
                  aria-labelledby="install-artifact-cli"
                />&nbsp;<span id="install-artifact-cli"
                  ><abbr title="command line interface">CLI</abbr>
                  &amp;<br /><abbr title="language server protocol">LSP</abbr>
                  server</span
                >
              </th>
              <th>
                <img
                  class="install-logo"
                  src="../vscode.png"
                  alt=""
                  aria-labelledby="install-artifact-vscode"
                /><br /><span id="install-artifact-vscode"
                  >VS&nbsp;Code<br />extension</span
                >
              </th>
              <th>
                <img
                  class="install-logo"
                  src="../vim.gif"
                  alt=""
                  aria-labelledby="install-artifact-vim"
                /><br /><span id="install-artifact-vim">Vim<br />plugin</span>
              </th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th>
                <a href="#npm"
                  ><img
                    class="install-logo"
                    src="../npm.svg"
                    alt=""
                    aria-labelledby="install-method-npm"
                  />&nbsp;<span id="install-method-npm">npm</span></a
                >
              </th>

              <td class="os">
                <img
                  class="os-logo"
                  src="../linux.svg"
                  alt="GNU/Linux"
                  title="GNU/Linux"
                />
              </td>
              <td class="os">
                <img
                  class="os-logo"
                  src="../macos.svg"
                  alt="macOS"
                  title="macOS"
                />
              </td>
              <td class="os">
                <img
                  class="os-logo"
                  src="../windows.svg"
                  alt="Windows"
                  title="Windows"
                />
              </td>

              <td class="meh">
                <a href="#npm">
                  <span
                    ><span aria-label="installed">✅</span
                    ><span class="footnote-marker"
                      ><span
                        aria-label="goodies not included"
                        title="goodies not included"
                        >&nbsp;*</span
                      ><span
                        aria-label="not installed globally"
                        title="not installed globally"
                        >†</span
                      ></span
                    ></span
                  ></a
                >
              </td>
              <td class="meh">
                <a href="#npm"
                  ><span><span aria-label="installed">✅</span></span></a
                >
              </td>
              <td><span aria-label="not installed"></span></td>
              <td><span aria-label="not installed"></span></td>
            </tr>

            <tr>
              <th>
                <a href="#homebrew"
                  ><img
                    class="install-logo"
                    src="../homebrew.svg"
                    alt=""
                    aria-labelledby="install-method-homebrew"
                  />&nbsp;<span id="install-method-homebrew">Homebrew</span></a
                >
              </th>

              <td class="os"></td>
              <td class="os">
                <img
                  class="os-logo"
                  src="../macos.svg"
                  alt="macOS"
                  title="macOS"
                />
              </td>
              <td class="os"></td>

              <td class="good">
                <a href="#homebrew"><span aria-label="installed">✅</span></a>
              </td>
              <td><span aria-label="not installed"></span></td>
              <td class="good">
                <a href="#homebrew"><span aria-label="installed">✅</span></a>
              </td>
            </tr>

            <tr>
              <th>
                <a href="#debian"
                  ><img
                    class="install-logo"
                    src="../debian.svg"
                    alt=""
                    aria-labelledby="install-method-debian"
                  />&nbsp;<span id="install-method-debian">Debian</span
                  ><br /><img
                    class="install-logo"
                    src="../ubuntu.svg"
                    alt=""
                    aria-labelledby="install-method-ubuntu"
                  />&nbsp;<span id="install-method-ubuntu">Ubuntu</span></a
                >
              </th>

              <td class="os">
                <img
                  class="os-logo"
                  src="../linux.svg"
                  alt="GNU/Linux"
                  title="GNU/Linux"
                />
              </td>
              <td class="os"></td>
              <td class="os"></td>

              <td class="good">
                <a href="#debian"><span aria-label="installed">✅</span></a>
              </td>
              <td><span aria-label="not installed"></span></td>
              <td class="good">
                <a href="#debian"><span aria-label="installed">✅</span></a>
              </td>
            </tr>

            <tr>
              <th>
                <a href="#nix"
                  ><img
                    class="install-logo"
                    src="../nix.svg"
                    alt=""
                    aria-labelledby="install-method-nix"
                  />&nbsp;<span id="install-method-nix">Nix</span></a
                >
              </th>

              <td class="os">
                <img
                  class="os-logo"
                  src="../linux.svg"
                  alt="GNU/Linux"
                  title="GNU/Linux"
                />
              </td>
              <td class="os">
                <img
                  class="os-logo"
                  src="../macos.svg"
                  alt="macOS"
                  title="macOS"
                />
              </td>
              <td class="os"></td>

              <td class="good">
                <a href="#nix"><span aria-label="installed">✅</span></a>
              </td>
              <td><span aria-label="not installed"></span></td>
              <td><span aria-label="not installed"></span></td>
            </tr>

            <tr>
              <th>
                <a href="#arch-linux"
                  ><img
                    class="install-logo"
                    src="../arch-linux.svg"
                    alt=""
                    aria-labelledby="install-method-arch-linux"
                  />&nbsp;<span id="install-method-arch-linux"
                    >Arch Linux</span
                  ></a
                >
              </th>

              <td class="os">
                <img
                  class="os-logo"
                  src="../linux.svg"
                  alt="GNU/Linux"
                  title="GNU/Linux"
                />
              </td>
              <td class="os"></td>
              <td class="os"></td>

              <td class="good">
                <a href="#arch-linux"><span aria-label="installed">✅</span></a>
              </td>
              <td><span aria-label="not installed"></span></td>
              <td class="good">
                <a href="#arch-linux"><span aria-label="installed">✅</span></a>
              </td>
            </tr>

            <tr>
              <th>
                <a href="#vscode-marketplace">
                  <img
                    class="install-logo"
                    src="../vscode.png"
                    alt=""
                    aria-labelledby="install-method-vscode"
                  />&nbsp;<span id="install-method-vscode"
                    >VS&nbsp;Code<br />marketplace</span
                  ></a
                >
              </th>

              <td class="os">
                <img
                  class="os-logo"
                  src="../linux.svg"
                  alt="GNU/Linux"
                  title="GNU/Linux"
                />
              </td>
              <td class="os">
                <img
                  class="os-logo"
                  src="../macos.svg"
                  alt="macOS"
                  title="macOS"
                />
              </td>
              <td class="os">
                <img
                  class="os-logo"
                  src="../windows.svg"
                  alt="Windows"
                  title="Windows"
                />
              </td>

              <td><span aria-label="not installed"></span></td>
              <td class="good">
                <a href="#vscode-marketplace"
                  ><span aria-label="installed">✅</span></a
                >
              </td>
              <td><span aria-label="not installed"></span></td>
            </tr>

            <tr>
              <th>
                <a href="#open-vsx">
                  <img
                    class="install-logo"
                    src="../open-vsx.svg"
                    alt=""
                    aria-labelledby="install-method-open-vsx"
                  />&nbsp;<span id="install-method-open-vsx"
                    >Open&nbsp;VSX</span
                  ></a
                >
              </th>

              <td class="os">
                <img
                  class="os-logo"
                  src="../linux.svg"
                  alt="GNU/Linux"
                  title="GNU/Linux"
                />
              </td>
              <td class="os">
                <img
                  class="os-logo"
                  src="../macos.svg"
                  alt="macOS"
                  title="macOS"
                />
              </td>
              <td class="os">
                <img
                  class="os-logo"
                  src="../windows.svg"
                  alt="Windows"
                  title="Windows"
                />
              </td>

              <td><span aria-label="not installed"></span></td>
              <td class="good">
                <a href="#open-vsx"><span aria-label="installed">✅</span></a>
              </td>
              <td><span aria-label="not installed"></span></td>
            </tr>

            <tr>
              <th><a href="#manual">Manual (pre-built)</a></th>

              <td class="os">
                <img
                  class="os-logo"
                  src="../linux.svg"
                  alt="GNU/Linux"
                  title="GNU/Linux"
                />
              </td>
              <td class="os">
                <img
                  class="os-logo"
                  src="../macos.svg"
                  alt="macOS"
                  title="macOS"
                />
              </td>
              <td class="os">
                <img
                  class="os-logo"
                  src="../windows.svg"
                  alt="Windows"
                  title="Windows"
                />
              </td>

              <td class="meh">
                <a href="#manual"
                  ><span
                    ><span aria-label="installed">✅</span
                    ><span
                      aria-label="goodies not included"
                      title="goodies not included"
                      class="footnote-marker"
                      >&nbsp;*</span
                    ></span
                  ></a
                >
              </td>
              <td class="good">
                <a href="#manual-vscode"
                  ><span aria-label="installed">✅</span></a
                >
              </td>
              <td><span aria-label="not installed"></span></td>
            </tr>

            <tr>
              <th><a href="#manual-vim">Manual (Vim&nbsp;plugin)</a></th>

              <td class="os">
                <img
                  class="os-logo"
                  src="../linux.svg"
                  alt="GNU/Linux"
                  title="GNU/Linux"
                />
              </td>
              <td class="os">
                <img
                  class="os-logo"
                  src="../macos.svg"
                  alt="macOS"
                  title="macOS"
                />
              </td>
              <td class="os">
                <img
                  class="os-logo"
                  src="../windows.svg"
                  alt="Windows"
                  title="Windows"
                />
              </td>

              <td><span aria-label="not installed"></span></td>
              <td><span aria-label="not installed"></span></td>
              <td class="good">
                <a href="#manual-vim"><span aria-label="installed">✅</span></a>
              </td>
            </tr>

            <tr>
              <th>Manual (source)</th>

              <td class="os">
                <img
                  class="os-logo"
                  src="../linux.svg"
                  alt="GNU/Linux"
                  title="GNU/Linux"
                />
              </td>
              <td class="os">
                <img
                  class="os-logo"
                  src="../macos.svg"
                  alt="macOS"
                  title="macOS"
                />
              </td>
              <td class="os">
                <img
                  class="os-logo"
                  src="../windows.svg"
                  alt="Windows"
                  title="Windows"
                />
              </td>

              <td class="good"><span aria-label="installed">✅</span></td>
              <td class="good"><span aria-label="installed">✅</span></td>
              <td class="good"><span aria-label="installed">✅</span></td>
            </tr>
          </tbody>
        </table>
        <figcaption>
          <p>
            <span>*</span> This installation method might not install extras
            such as documentation or shell completion plugins.
          </p>
          <p>
            <span>†</span> The LSP server is not installed globally with this
            installation method, so some editors might not be able to access it.
          </p>
        </figcaption>
      </figure>

      <h2 id="install-cli">
        <img class="install-logo" src="../gnome-terminal.svg" alt="" />&nbsp;CLI
        and LSP server
      </h2>
      <p>Install the quick-lint-js CLI, which includes the LSP server:</p>
      <div class="os-column-table">
        <div class="linux">
          <h3>
            <img
              class="os-logo"
              src="../linux.svg"
              alt=""
              title=""
            />&nbsp;GNU/Linux
          </h3>
          <ul>
            <li>
              <a href="#npm"
                ><img
                  class="install-logo"
                  src="../npm.svg"
                  alt=""
                />&nbsp;npm</a
              >
            </li>
            <li>
              <a href="#debian"
                ><img
                  class="install-logo"
                  src="../debian.svg"
                  alt=""
                />&nbsp;Debian</a
              >
            </li>
            <li>
              <a href="#debian"
                ><img
                  class="install-logo"
                  src="../ubuntu.svg"
                  alt=""
                />&nbsp;Ubuntu</a
              >
            </li>
            <li>
              <a href="#nix"
                ><img
                  class="install-logo"
                  src="../nix.svg"
                  alt=""
                />&nbsp;Nix</a
              >
            </li>
            <li>
              <a href="#arch-linux"
                ><img
                  class="install-logo"
                  src="../arch-linux.svg"
                  alt=""
                />&nbsp;Arch Linux</a
              >
            </li>
            <li><a href="#manual">Manual (pre-built)</a></li>
          </ul>
        </div>
        <div class="macos">
          <h3>
            <img
              class="os-logo"
              src="../macos.svg"
              alt=""
              title=""
            />&nbsp;macOS
          </h3>
          <ul>
            <li>
              <a href="#npm"
                ><img
                  class="install-logo"
                  src="../npm.svg"
                  alt=""
                />&nbsp;npm</a
              >
            </li>
            <li>
              <a href="#homebrew"
                ><img
                  class="install-logo"
                  src="../homebrew.svg"
                  alt=""
                />&nbsp;Homebrew</a
              >
            </li>
            <li>
              <a href="#nix"
                ><img
                  class="install-logo"
                  src="../nix.svg"
                  alt=""
                />&nbsp;Nix</a
              >
            </li>
            <li><a href="#manual">Manual (pre-built)</a></li>
          </ul>
        </div>
        <div class="windows">
          <h3>
            <img
              class="os-logo"
              src="../windows.svg"
              alt=""
              title=""
            />&nbsp;Windows
          </h3>
          <ul>
            <li>
              <a href="#npm"
                ><img
                  class="install-logo"
                  src="../npm.svg"
                  alt=""
                />&nbsp;npm</a
              >
            </li>
            <li><a href="#manual">Manual (pre-built)</a></li>
          </ul>
        </div>
      </div>

      <h2 id="install-vim">
        <img class="install-logo" src="../vim.gif" alt="" />&nbsp;Vim plugin
      </h2>
      <p>Install the quick-lint-js Vim plugin:</p>
      <div class="os-column-table">
        <div class="linux">
          <h3>
            <img
              class="os-logo"
              src="../linux.svg"
              alt=""
              title=""
            />&nbsp;GNU/Linux
          </h3>
          <ul>
            <li>
              <a href="#debian"
                ><img
                  class="install-logo"
                  src="../debian.svg"
                  alt=""
                />&nbsp;Debian</a
              >
            </li>
            <li>
              <a href="#debian"
                ><img
                  class="install-logo"
                  src="../ubuntu.svg"
                  alt=""
                />&nbsp;Ubuntu</a
              >
            </li>
            <li>
              <a href="#arch-linux"
                ><img
                  class="install-logo"
                  src="../arch-linux.svg"
                  alt=""
                />&nbsp;Arch Linux</a
              >
            </li>
            <li><a href="#manual-vim">Manual</a></li>
          </ul>
        </div>
        <div class="macos">
          <h3>
            <img
              class="os-logo"
              src="../macos.svg"
              alt=""
              title=""
            />&nbsp;macOS
          </h3>
          <ul>
            <li><a href="#manual-vim">Manual</a></li>
          </ul>
        </div>
        <div class="windows">
          <h3>
            <img
              class="os-logo"
              src="../windows.svg"
              alt=""
              title=""
            />&nbsp;Windows
          </h3>
          <ul>
            <li><a href="#manual-vim">Manual</a></li>
          </ul>
        </div>
      </div>

      <article id="npm">
        <h2><img class="install-logo" src="../npm.svg" alt="" />&nbsp;npm</h2>
        <p>
          Supported operating systems:
          <img
            class="os-logo"
            src="../linux.svg"
            alt="GNU/Linux"
            title="GNU/Linux"
          />
          <img class="os-logo" src="../macos.svg" alt="macOS" title="macOS" />
          <img
            class="os-logo"
            src="../windows.svg"
            alt="Windows"
            title="Windows"
          />
        </p>

        <p>
          quick-lint-js has an
          <a href="https://www.npmjs.com/package/quick-lint-js">npm package</a>,
          making it easy to install the CLI in your JavaScript project.
        </p>

        <p>
          In order to install quick-lint-js' npm package, you must first install
          either the
          <a
            href="https://docs.npmjs.com/downloading-and-installing-node-js-and-npm"
            >npm client</a
          >
          or <a href="https://yarnpkg.com/getting-started/install">yarn</a>.
        </p>

        <p>
          There are two ways to install quick-lint-js: within a project, or
          globally.
        </p>

        <!-- TODO(strager): Create a tabbed interface to reduce clutter. -->

        <h3>Install within project</h3>
        <p>
          Install quick-lint-js within a project so anyone can use it when
          hacking on your project:
        </p>

        <h4>
          <img class="os-logo" src="../linux.svg" alt="" />&nbsp;GNU/Linux and
          <img class="os-logo" src="../macos.svg" alt="" />&nbsp;macOS with npm
        </h4>
        <blockquote>
          <pre><code><kbd>npm install quick-lint-js --save-dev --save-exact</kbd>
<kbd>node_modules/.bin/quick-lint-js --help</kbd></code></pre>
        </blockquote>

        <h4>
          <img class="os-logo" src="../linux.svg" alt="" />&nbsp;GNU/Linux and
          <img class="os-logo" src="../macos.svg" alt="" />&nbsp;macOS with yarn
        </h4>
        <blockquote>
          <pre><code><kbd>yarn add quick-lint-js --dev --exact</kbd>
<kbd>node_modules/.bin/quick-lint-js --help</kbd></code></pre>
        </blockquote>

        <h4>
          <img class="os-logo" src="../windows.svg" alt="" />&nbsp;Windows with
          npm
        </h4>
        <blockquote>
          <pre><code><kbd>npm install quick-lint-js --save-dev --save-exact</kbd>
<kbd>node_modules\.bin\quick-lint-js.cmd --help</kbd></code></pre>
        </blockquote>

        <h4>
          <img class="os-logo" src="../windows.svg" alt="" />&nbsp;Windows with
          yarn
        </h4>
        <blockquote>
          <pre><code><kbd>yarn add quick-lint-js --dev --exact</kbd>
<kbd>node_modules\.bin\quick-lint-js.cmd --help</kbd></code></pre>
        </blockquote>

        <h3>Install globally</h3>
        <p>
          Install quick-lint-js globally (on your machine) for use anywhere:
        </p>

        <h4>
          <img class="os-logo" src="../linux.svg" alt="" />&nbsp;GNU/Linux and
          <img class="os-logo" src="../macos.svg" alt="" />&nbsp;macOS
        </h4>
        <blockquote>
          <pre><code><kbd>sudo npm install --global --unsafe-perm quick-lint-js</kbd>
<kbd>quick-lint-js --help</kbd></code></pre>
        </blockquote>

        <h4>
          <img class="os-logo" src="../windows.svg" alt="" />&nbsp;Windows
        </h4>
        <blockquote>
          <pre><code><kbd>npm install --global quick-lint-js</kbd>
<kbd>quick-lint-js.cmd --help</kbd></code></pre>
        </blockquote>
      </article>

      <article id="homebrew">
        <h2>
          <img
            class="install-logo"
            src="../homebrew.svg"
            alt=""
          />&nbsp;Homebrew
        </h2>
        <p>
          Supported operating systems:
          <img class="os-logo" src="../macos.svg" alt="macOS" title="macOS" />
        </p>

        <p>
          quick-lint-js has a Homebrew formula, making it easy to install the
          CLI and LSP server on macOS.
        </p>

        <p>
          In order to install quick-lint-js' Homebrew formula, you must first
          <a href="https://brew.sh/#install">install Homebrew</a>.
        </p>

        <p>
          Then, open a terminal, and run the following command to add
          quick-lint-js' tap to your Homebrew installation:
        </p>
        <blockquote>
          <pre><code><span class="long-shell-command-line"><kbd>brew tap quick-lint/quick-lint-js https://github.com/quick-lint/quick-lint-js.git</kbd></span></code></pre>
        </blockquote>

        <p>
          Finally, in the terminal, run the following command to install
          quick-lint-js:
        </p>
        <blockquote>
          <pre><code><kbd>brew install quick-lint-js</kbd></code></pre>
        </blockquote>

        <p>
          Now the CLI, called <kbd>quick-lint-js</kbd>, is available in your
          user path:
        </p>
        <blockquote>
          <pre><code><kbd>quick-lint-js --help</kbd></code></pre>
        </blockquote>

        <p>
          Configure the Vim plugin by opening Vim and running
          <kbd>:help quick-lint-js</kbd>.
        </p>
      </article>

      <article id="debian">
        <h2>
          <img class="install-logo" src="../debian.svg" alt="" />&nbsp;Debian
          and
          <img class="install-logo" src="../ubuntu.svg" alt="" />&nbsp;Ubuntu
        </h2>
        <p>
          Supported operating systems:
          <img
            class="os-logo"
            src="../linux.svg"
            alt="GNU/Linux"
            title="GNU/Linux"
          />
        </p>

        <p>Open a terminal, and run the following commands:</p>
        <blockquote>
          <pre><code><kbd>curl https://c.quick-lint-js.com/quick-lint-js-release.key | sudo apt-key add -</kbd>
<span class="long-shell-command-line"><kbd>printf '\n# https://quick-lint-js.com/install/#debian\ndeb https://c.quick-lint-js.com/debian experimental main\n' | sudo tee -a /etc/apt/sources.list.d/quick-lint-js.list</kbd></span>
<kbd>sudo apt-get update</kbd>

# <img class="install-logo" src="../gnome-terminal.svg" alt="" /> CLI and LSP server
<kbd>sudo apt-get install quick-lint-js</kbd>

# <img class="install-logo" src="../vim.gif" alt="" /> Vim plugin
<kbd>sudo apt-get install quick-lint-js-vim</kbd></code></pre>
        </blockquote>

        <p>Verify that quick-lint-js is installed:</p>
        <blockquote>
          <pre><code><kbd>quick-lint-js --version</kbd>
quick-lint-js version 0.3.0</code></pre>
        </blockquote>

        <p>
          Configure the Vim plugin by opening Vim and running
          <kbd>:help quick-lint-js</kbd>.
        </p>
      </article>

      <article id="nix">
        <h2><img class="install-logo" src="../nix.svg" alt="" />&nbsp;Nix</h2>
        <p>
          Supported operating systems:
          <img
            class="os-logo"
            src="../linux.svg"
            alt="GNU/Linux"
            title="GNU/Linux"
          />
          <img class="os-logo" src="../macos.svg" alt="macOS" title="macOS" />
        </p>

        <p>
          In order to install quick-lint-js' Nix package, you must first install
          <a href="https://nixos.org/download.html#nix-quick-install">Nix</a> or
          NixOS.
        </p>

        <p>Open a terminal, and run the following command:</p>
        <blockquote>
          <pre
            class="long-shell-command-line"
          ><code><kbd>nix-env -f https://github.com/quick-lint/quick-lint-js/archive/0.3.0.tar.gz -iA quick-lint-js</kbd></code></pre>
        </blockquote>

        <p>
          Now the CLI, called <code>quick-lint-js</code>, is available in your
          user profile:
        </p>
        <blockquote>
          <pre><code><kbd>quick-lint-js --version</kbd>
quick-lint-js version 0.3.0</code></pre>
        </blockquote>
      </article>

      <article id="arch-linux">
        <h2>
          <img class="install-logo" src="../arch-linux.svg" alt="" />&nbsp;Arch
          Linux
        </h2>
        <p>
          Supported operating systems:
          <img
            class="os-logo"
            src="../linux.svg"
            alt="GNU/Linux"
            title="GNU/Linux"
          />
        </p>

        <p>quick-lint-js has two packages in the AUR:</p>
        <ul>
          <li>
            <a href="https://aur.archlinux.org/packages/quick-lint-js/"
              >quick-lint-js</a
            >: latest stable release
          </li>
          <li>
            <a href="https://aur.archlinux.org/packages/quick-lint-js-git/"
              >quick-lint-js-git</a
            >: unstable version from VCS
          </li>
        </ul>

        <p>
          If you are using an
          <a href="https://wiki.archlinux.org/title/AUR_helpers">AUR helper</a>,
          install quick-lint-js on Arch Linux using your helper. For example, to
          install with <a href="https://github.com/Jguer/yay">yay</a>, open a
          terminal and run the following commands:
        </p>
        <blockquote>
          <pre><code><kbd>yay -Sy quick-lint-js</kbd></code></pre>
        </blockquote>

        <p>
          If you want to install without an AUR helper, download and install the
          package from AUR manually by running the following commands:
        </p>
        <blockquote>
          <pre><code><kbd>pacman -Sy base-devel git</kbd>
<kbd>git clone https://aur.archlinux.org/quick-lint-js.git aur-quick-lint-js</kbd>
<kbd>cd aur-quick-lint-js</kbd>
<kbd>makepkg -si</kbd></code></pre>
        </blockquote>

        <p>
          Configure the Vim plugin by opening Vim and running
          <kbd>:help quick-lint-js</kbd>.
        </p>
      </article>

      <article id="vscode-marketplace">
        <h2>
          <img class="install-logo" src="../vscode.png" alt="" />&nbsp;Visual
          Studio Code marketplace
        </h2>
        <p>
          Supported operating systems:
          <img
            class="os-logo"
            src="../linux.svg"
            alt="GNU/Linux"
            title="GNU/Linux"
          />
          <img class="os-logo" src="../macos.svg" alt="macOS" title="macOS" />
          <img
            class="os-logo"
            src="../windows.svg"
            alt="Windows"
            title="Windows"
          />
        </p>

        <p>
          quick-lint-js has a Visual Studio Code extension on the marketplace.
        </p>
        <p>
          Visit the
          <a
            href="https://marketplace.visualstudio.com/items?itemName=quick-lint.quick-lint-js"
            >quick-lint-js extension</a
          >
          page, then click the <em>Install</em> button. If the
          <em>Install</em> button is missing, copy the
          <em>Installation</em> command, open Visual Studio Code, press
          <kbd>CTRL-P</kbd> (Linux or Windows) or <kbd>CMD-P</kbd> (macOS), then
          paste the copied command.
        </p>
        <p>
          Alternatively, open Visual Studio Code, open the Extensions panel, and
          search for <kbd>quick-lint-js</kbd>.
        </p>
      </article>

      <article id="open-vsx">
        <h2>
          <img class="install-logo" src="../open-vsx.svg" alt="" />&nbsp;Open
          VSX
        </h2>
        <p>
          Supported operating systems:
          <img
            class="os-logo"
            src="../linux.svg"
            alt="GNU/Linux"
            title="GNU/Linux"
          />
          <img class="os-logo" src="../macos.svg" alt="macOS" title="macOS" />
          <img
            class="os-logo"
            src="../windows.svg"
            alt="Windows"
            title="Windows"
          />
        </p>

        <p>quick-lint-js has a VSCodium extension on the Open VSX registry.</p>
        <p>
          Open VSCodium, open the Extensions panel, and search for
          <kbd>quick-lint-js</kbd>.
        </p>
        <p>Alternatively, install the extension manually:</p>
        <ol>
          <li>
            Visit the
            <a href="https://open-vsx.org/extension/quick-lint/quick-lint-js"
              >quick-lint-js extension</a
            >
            page.
          </li>

          <li>Click the <em>Download</em> button.</li>
          <li>Open VSCodium.</li>
          <li>Open the Extensions panel.</li>
          <li>Click the "..." to open a menu.</li>
          <li>Select <em>Install from VSIX...</em>.</li>
          <li>
            Choose the <code>quick-lint.quick-lint-js-0.3.0.vsix</code> file you
            downloaded.
          </li>
        </ol>
      </article>

      <article id="manual">
        <h2>Manual (pre-built)</h2>
        <p>
          Supported operating systems:
          <img
            class="os-logo"
            src="../linux.svg"
            alt="GNU/Linux"
            title="GNU/Linux"
          />
          <img class="os-logo" src="../macos.svg" alt="macOS" title="macOS" />
          <img
            class="os-logo"
            src="../windows.svg"
            alt="Windows"
            title="Windows"
          />
        </p>

        <ul>
          <li>
            <a href="#manual-cli"
              ><img
                class="install-logo"
                src="../gnome-terminal.svg"
                alt=""
              />&nbsp;CLI and LSP server</a
            >
          </li>
          <li>
            <a href="#manual-vscode"
              ><img
                class="install-logo"
                src="../vscode.png"
                alt=""
              />&nbsp;Visual Studio Code extension</a
            >
          </li>
        </ul>

        <h3 id="manual-cli">
          <img
            class="install-logo"
            src="../gnome-terminal.svg"
            alt=""
          />&nbsp;CLI and LSP server
        </h3>
        <ol>
          <li>
            Download the latest release of quick-lint-js for your platform:
            <!-- TODO(strager): Create a /releases/ directory. -->
            <!-- TODO(strager): Include installation instructions within the archive. -->
            <ul>
              <li>
                <a
                  href="https://c.quick-lint-js.com/releases/0.3.0/manual/linux.tar.gz"
                  >GNU/Linux</a
                >
              </li>
              <li>
                <a
                  href="https://c.quick-lint-js.com/releases/0.3.0/manual/macos.tar.gz"
                  >macOS</a
                >
              </li>
              <li>
                <a
                  href="https://c.quick-lint-js.com/releases/0.3.0/manual/windows.zip"
                  >Windows</a
                >
              </li>
            </ul>
          </li>
          <li>Extract the downloaded archive.</li>
          <li>
            Copy the extracted
            <code>quick-lint-js/bin/quick-lint-js</code> (GNU/Linux or macOS) or
            <code>bin\quick-lint-js.exe</code> (Windows) file into a directory
            in your <code>PATH</code>.
            <p>
              For example, copy it into the
              <code>/usr/local/bin</code> (GNU/Linux or macOS) or
              <code>C:\Windows\System32\</code> (Windows) directory.
            </p>
          </li>
          <li>
            Open a terminal or PowerShell window or Command Prompt window. Type
            <kbd>quick-lint-js --version</kbd> and press enter to verify the
            installation succeeded.
          </li>
        </ol>

        <h3 id="manual-vscode">
          <img class="install-logo" src="../vscode.png" alt="" />&nbsp;Visual
          Studio Code extension
        </h3>
        <p>
          quick-lint-js has a Visual Studio Code extension. To install it
          manually (without the marketplace):
        </p>
        <ol>
          <li>
            <a
              href="https://c.quick-lint-js.com/releases/0.3.0/vscode/quick-lint-js-0.3.0.vsix"
              >Download the latest release of the quick-lint-js extension.</a
            >
          </li>
          <li>Open Visual Studio Code.</li>
          <li>Open the Extensions panel.</li>
          <li>
            Click the "..." icon to open the
            <span>Views and More Actions...</span> menu.
          </li>
          <li>Choose <span>Install from VSIX...</span>.</li>
          <li>
            Select the downloaded <code>quick-lint-js-0.3.0.vsix</code> file.
          </li>
        </ol>
        <p>
          The extension is self-contained. You do not need to also install the
          quick-lint-js CLI or LSP server.
        </p>
      </article>

      <article id="manual-vim">
        <h2>
          <img class="install-logo" src="../vim.gif" alt="" />&nbsp;Vim plugin
        </h2>
        <p>
          Supported operating systems:
          <img
            class="os-logo"
            src="../linux.svg"
            alt="GNU/Linux"
            title="GNU/Linux"
          />
          <img class="os-logo" src="../macos.svg" alt="macOS" title="macOS" />
          <img
            class="os-logo"
            src="../windows.svg"
            alt="Windows"
            title="Windows"
          />
        </p>

        <h3>Prerequisites</h3>
        <ul>
          <li>
            Install the quick-lint-js CLI using one of the following methods:
            <ul>
              <li>
                <a href="#npm">
                  <img
                    class="os-logo"
                    src="../linux.svg"
                    alt="GNU/Linux"
                    title="GNU/Linux"
                  />
                  <img
                    class="os-logo"
                    src="../macos.svg"
                    alt="macOS"
                    title="macOS"
                  />
                  <img
                    class="os-logo"
                    src="../windows.svg"
                    alt="Windows"
                    title="Windows"
                  />
                  npm</a
                >
                (global install only)
              </li>

              <li>
                <a href="#homebrew">
                  <img
                    class="os-logo"
                    src="../macos.svg"
                    alt="macOS"
                    title="macOS"
                  />
                  Homebrew</a
                >
              </li>

              <li>
                <a href="#manual-cli"
                  ><img
                    class="os-logo"
                    src="../linux.svg"
                    alt="GNU/Linux"
                    title="GNU/Linux"
                  />
                  <img
                    class="os-logo"
                    src="../macos.svg"
                    alt="macOS"
                    title="macOS"
                  />
                  <img
                    class="os-logo"
                    src="../windows.svg"
                    alt="Windows"
                    title="Windows"
                  />
                  Manual (pre-built)</a
                >
              </li>
            </ul>
          </li>

          <li>
            Install and configure one of the following Vim plugins:
            <ul>
              <li>
                <a href="https://github.com/dense-analysis/ale"
                  >ALE - Asynchronous Lint Engine</a
                >
                v2.1.1 or newer, or version v3.0.0 or newer
              </li>
            </ul>
          </li>
        </ul>

        <h3>Installation</h3>
        <p>Install this plugin with your favorite Vim packaging system:</p>
        <ul>
          <li>
            <a href="#manual-vim-package">Vim package</a> (built into Vim 8.0
            and newer)
          </li>
          <li><a href="#manual-vim-pathogen">Pathogen</a></li>
          <li><a href="#manual-vim-vim-plug">Vim-Plug</a></li>
          <li><a href="#manual-vim-vundle">Vundle</a></li>
        </ul>

        <h4 id="manual-vim-package">Install as a Vim package</h4>
        <p>This option requires Vim 8.0 or newer.</p>

        <h5>
          <img class="os-logo" src="../linux.svg" alt="" />&nbsp;GNU/Linux and
          <img class="os-logo" src="../macos.svg" alt="" />&nbsp;macOS
        </h5>
        <ol>
          <li>
            <a
              href="https://c.quick-lint-js.com/releases/0.3.0/vim/quick-lint-js-vim.zip"
              >Download the quick-lint-js Vim plugin.</a
            >
          </li>
          <li>
            Add <code style="vim">packloadall</code> to your
            <code>~/.vimrc</code> file if not already present.
          </li>
          <li>
            Create the directory <code>~/.vim/pack/external/start/</code>.
          </li>
          <li>
            Copy the extracted
            <code>quick-lint-js.vim</code> directory into the
            <code>~/.vim/pack/external/start/</code> directory.
          </li>
          <li>Restart Vim.</li>
        </ol>

        <h5>
          <img class="os-logo" src="../windows.svg" alt="" />&nbsp;Windows
        </h5>
        <ol>
          <li>
            <a
              href="https://c.quick-lint-js.com/releases/0.3.0/vim/quick-lint-js-vim.zip"
              >Download the quick-lint-js Vim plugin.</a
            >
          </li>
          <li>
            Add <code style="vim">packloadall</code> to your
            <code>%USERPROFILE%\_vimrc</code> file (or
            <code>%USERPROFILE%\vimfiles\vimrc</code>) if not already present.
          </li>
          <li>
            Create the directory
            <code>%USERPROFILE%\vimfiles\pack\external\start\</code>.
          </li>
          <li>
            Copy the extracted <code>quick-lint-js.vim</code> directory into the
            <code>%USERPROFILE%\vimfiles\pack\external\start\</code> directory.
          </li>
          <li>Restart Vim.</li>
        </ol>

        <h4 id="manual-vim-pathogen">Install with Pathogen</h4>
        <p>
          This option requires
          <a href="https://github.com/tpope/vim-pathogen">Pathogen</a>.
        </p>
        <h5>
          <img class="os-logo" src="../linux.svg" alt="" />&nbsp;GNU/Linux and
          <img class="os-logo" src="../macos.svg" alt="" />&nbsp;macOS
        </h5>
        <ol>
          <li>
            <a
              href="https://c.quick-lint-js.com/releases/0.3.0/vim/quick-lint-js-vim.zip"
              >Download the quick-lint-js Vim plugin.</a
            >
          </li>
          <li>
            Copy the <code>quick-lint-js.vim</code> directory into
            <code>~/.vim/bundle/</code> directory.
          </li>
          <li>Restart Vim.</li>
        </ol>

        <h4 id="manual-vim-vim-plug">Install with Vim-Plug</h4>
        <p>
          This option requires
          <a href="https://github.com/junegunn/vim-plug">Vim-Plug</a>.
        </p>
        <ol>
          <li>
            Add the following line to your <code>vimrc</code> file between
            <code class="vim">call&nbsp;plug#begin(...)</code> and
            <code class="vim">call&nbsp;plug#end()</code>:
            <blockquote>
              <pre><code class="vim">Plug 'quick-lint/quick-lint-js', {'rtp': 'plugin/vim/quick-lint-js.vim'}</code></pre>
            </blockquote>
          </li>
          <li>Restart Vim.</li>
          <li>In Vim, run <code class="vim">:PlugInstall</code>.</li>
        </ol>

        <h4 id="manual-vim-vundle">Install with Vundle</h4>
        <p>
          This option requires
          <a href="https://github.com/VundleVim/Vundle.vim">Vundle</a>.
        </p>
        <ol>
          <li>
            Add the following line to your <code>vimrc</code> file between
            <code class="vim">call&nbsp;vundle#begin(...)</code> and
            <code class="vim">call&nbsp;vundle#end()</code>:
            <blockquote>
              <pre><code class="vim">Plugin 'quick-lint/quick-lint-js', {'rtp': 'plugin/vim/quick-lint-js.vim'}</code></pre>
            </blockquote>
          </li>
          <li>Restart Vim.</li>
          <li>In Vim, run <code class="vim">:PluginInstall</code>.</li>
        </ol>

        <h3>Configuring</h3>
        <p>
          Configure the Vim plugin by opening Vim and running
          <kbd>:help quick-lint-js</kbd>, or
          <a
            href="https://github.com/quick-lint/quick-lint-js/blob/master/plugin/vim/quick-lint-js.vim/doc/quick-lint-js.txt"
            >read the Vim plugin docs online</a
          >.
        </p>
      </article>
    </main>

    <footer><%- await include("../common-footer-nav.ejs.html") %></footer>
  </body>
</html>

<!--
quick-lint-js finds bugs in JavaScript programs.
Copyright (C) 2020  Matthew "strager" Glazar

This file is part of quick-lint-js.

quick-lint-js is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

quick-lint-js is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with quick-lint-js.  If not, see <https://www.gnu.org/licenses/>.
-->
<!--
Other files may have different copyright and may be licensed under different
licenses. See license/ for details.
-->
